﻿@model  OA.Model.LoginInfo
@{
    Layout = null;
    string errorMsg = ViewBag.ErrorMsg;
    string tips = string.Empty;
    if (!string.IsNullOrWhiteSpace(errorMsg))
    {
        tips = $"layer.msg('{errorMsg}');";
    }
    OA.Model.BaseConfig baseConfig = ViewBag.BaseConfig;
}
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>管理员登陆</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        .login-bg {
            background: url(@baseConfig.OssUrl/img/bg.png) no-repeat center;
            background-size: cover;
            overflow: hidden;
        }

        .login {
            margin: 120px auto 0 auto;
            min-height: 420px;
            max-width: 420px;
            padding: 40px;
            background-color: #ffffff;
            margin-left: auto;
            margin-right: auto;
            border-radius: 4px;
            /* overflow-x: hidden; */
            box-sizing: border-box;
        }

            .login a.logo {
                display: block;
                height: 58px;
                width: 167px;
                margin: 0 auto 30px auto;
                background-size: 167px 42px;
            }

            .login .message {
                margin: 10px 0 0 -58px;
                padding: 18px 10px 18px 60px;
                background: #189F92;
                position: relative;
                color: #fff;
                font-size: 16px;
            }

            .login #darkbannerwrap {
                background: url(@baseConfig.OssUrl/img/aiwrap.png);
                width: 18px;
                height: 10px;
                margin: 0 0 20px -58px;
                position: relative;
            }

            .login input[type=text],
            .login input[type=file],
            .login input[type=password],
            .login input[type=email],
            .login select {
                border: 1px solid #DCDEE0;
                vertical-align: middle;
                border-radius: 3px;
                height: 50px;
                padding: 0px 16px;
                font-size: 14px;
                color: #555555;
                outline: none;
                width: 100%;
                box-sizing: border-box;
            }

                .login input[type=text]:focus,
                .login input[type=file]:focus,
                .login input[type=password]:focus,
                .login input[type=email]:focus,
                .login select:focus {
                    border: 1px solid #27A9E3;
                }

            .login input[type=submit],
            .login input[type=button] {
                display: inline-block;
                padding: 12px 24px;
                margin: 0px;
                font-size: 18px;
                line-height: 24px;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                color: #ffffff;
                background-color: #189F92;
                border-radius: 3px;
                border: none;
                -webkit-appearance: none;
                outline: none;
                width: 100%;
            }

            .login hr {
                background: #fff 0 0 no-repeat;
            }

                .login hr.hr15 {
                    height: 15px;
                    border: none;
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                }

                .login hr.hr20 {
                    height: 20px;
                    border: none;
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                }
    </style>

</head>
<body class="login-bg">

    <div class="login">
        <div class="message">管理员登陆</div>
        <div id="darkbannerwrap"></div>
        <form id="loginForm" method="post" class="layui-form">
            @Html.AntiForgeryToken()
            <input name="UserName" id="UserName" placeholder="用户名" type="text" lay-verify="required" class="layui-input" value="@Model.UserName">
            <hr class="hr15">
            <input name="Password" id="Password" lay-verify="required" placeholder="密码" type="password" class="layui-input" value="@Model.Password">
            <hr class="hr15">
            <input style="width:56%;" name="ValidateCode" id="ValidateCode" lay-verify="required" placeholder="验证码" type="text" class="layui-input">
            <div id="imgCode" class="layui-input" style="float:right; height:50px; overflow:hidden;">
                <img src="" class="imgCode" style="height: 50px;">
            </div>
            <hr class="hr15">
            <input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20">
        </form>
    </div>

    <script type="text/javascript" src="@baseConfig.OssUrl/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="@baseConfig.OssUrl/front/layui/layui.js"></script>
    <script type="text/javascript">
        function GetValidateImage() {
            $.getJSON("/Home/ValidateImage?type=1", function (result) {
                if (result.State == 200) {
                    $(".imgCode").prop("src", "data:image/png;base64," + result.Data);
                }
            })
        }
        $("img.imgCode").click(function () {
            GetValidateImage();
        });
        GetValidateImage();
        layui.use('layer', function () {
            var layer = layui.layer;
            $("#loginForm").submit(function (e) {
                if ($.trim($("#UserName").val()).length === 0) {
                    layer.msg("请输入用户名");
                    return false;
                }
                if ($.trim($("#Password").val()).length === 0) {
                    layer.msg("请输入密码");
                    return false;
                }
                if ($.trim($("#ValidateCode").val()).length === 0) {
                    layer.msg("请输入验证码");
                    return false;
                }
                return true;
            });
            @Html.Raw(tips)
        });
    </script>    
</body>
</html>